
$('.header-main .site').hover(function (e) {
    $(this).addClass('site1');
    $('.side-main').addClass('show')
}, function (e) {
    $(this).removeClass('site1');
    $('.side-main').removeClass('show').hover(function () {
        $(e.target).addClass('site1');
        $('.side-main').addClass('show')
    }, function () {
        $(e.target).removeClass('site1');
        $('.side-main').removeClass('show')
    })
});


$('.header-main-right li:nth-child(5)').hover(function (e) {
    $(this).addClass('li1');
    $('.side-nav').addClass('show')
}, function (e) {
    $(this).removeClass('li1');
    $('.side-nav').removeClass('show').hover(function () {
        $(e.target).addClass('li1');
        $(this).addClass('show')
    }, function () {
        $(e.target).removeClass('li1');
        $(this).removeClass('show')
    })
});

// 购物车
$('.shop').hover(function (e) {
    $(this).addClass('shop1');
    $('.shop-nav').addClass('show')
}, function (e) {
    $(this).removeClass('shop1');
    $('.shop-nav').removeClass('show').hover(function () {
        $(e.target).addClass('shop1');
        $(this).addClass('show')
    }, function () {
        $(e.target).removeClass('shop1');
        $(this).removeClass('show')
    })
});
$.getJSON('../mock/presell.json', function (data) {
    // 1.初始化页面
    showPage(data[0].presell);
    // console.log(data[0].presell[0]);
    // console.log(data[0].presell[1].nowurl);
   

    //   1.所有的复选框选中或者取消事件
    $('input[type="checkbox"]').change(function () {
        console.log(this);
        console.log($(this).is(':checked'));
        if ($(this).is(':checked')) {
            $(this).next('label').addClass('active');
        } else {
            $(this).next('label').removeClass('active');
        }
    });

    // 2.全选选中-全选取消事件------合计执行
    // 合计函数
    function total() {
        // 选中的总个数
        var totalCount = 0;
        // 总价
        var totalPrice = 0;
        $('.son-check').each(function (index, value) {
            // console.log(this);
            if ($(this).is(':checked')) {
                // 数量
                var goodsCount = $(this).parents('.cart-lists').find('.cart-amount').find('input').val();
                // 小计
                var goodsPrice = $(this).parents('.cart-lists').find('.price-sum').text();
                // 进行合并
                totalCount += Number(goodsCount);
                totalPrice += Number(goodsPrice);
            };
            // 设置到元素上
            $('.buy-num').text(totalCount);
        });
        var goodsPrice=0;
      var geshu= $('.cart-lists ul .cart-check .active').length
$('.price-sum').each(function(index,value){
    if($(value).parents('ul').children().children('label').hasClass('active')){
        goodsPrice +=  Number($(value).text());
    }
})
$('.pay-price').text( goodsPrice);
$('.buy-num').text(geshu);
    };
    $('.whole-check').change(function () {
        var checkboxOther = $('input[type="checkbox"]').not('.whole-check');
        if ($(this).is(':checked')) {
            console.log(checkboxOther);
            checkboxOther.prop('checked', true);
            checkboxOther.next('label').addClass('active');
        } else {
            checkboxOther.prop('checked', false);
            checkboxOther.next('label').removeClass('active');
        };
        // 执行合计
        total();
    });

    // 3.店铺的选择框选中, 该店铺下的所有商品也被选中,如果没有被选中,该店铺下的商品也不选中,所有店铺选择框全部选中,全选选中-任何一个不选,全选取消------合计执行
    $('.shop-check').change(function () {
        // 找到该店铺下所有的商品的选中框
        var sonCheckCar = $(this).parents('.cart-box').find('.son-check');
        if ($(this).is(':checked')) {
            sonCheckCar.prop('checked', true);
            sonCheckCar.next('label').addClass('active');
        } else {
            sonCheckCar.prop('checked', false);
            sonCheckCar.next('label').removeClass('active');
        };
        // 店铺的DOM元素的数量
        var count = $('.shop-check').length;
        // 选中的店铺的DOM元素的数量
        var num = $('.shop-check:checked').length;
        // 如果相等那么全选选中
        if (count == num) {
            $('.whole-check').prop('checked', true);
            $('.whole-check').next('label').addClass('active');
        } else {
            $('.whole-check').prop('checked', false);
            $('.whole-check').next('label').removeClass('active');
        };
        // 执行合计
        total();

    });


    // 4.该店铺商品全部选中,该店铺的选择框选中,任何一个不选,该店铺的选择框不选---合计
    $('.son-check').change(function () {
        // 点击商品的最外的父元素
        var thisShop = $(this).parents('.cart-box');
        if ($(this).is(':checked')) {
            // 该店铺下的所有的商品的DOM元素的数量
            var count = thisShop.find('.son-check').length;
            // 该店铺下的所有的选中商品的DOM元素的数量
            var num = thisShop.find('.son-check:checked').length;
            // 如果相等,店铺也选中
            if (count == num) {
                thisShop.find('.shop-check').prop('checked', true);
                thisShop.find('.shop-check').next('label').addClass('active');
            } else {
                thisShop.find('.shop-check').prop('checked', false);
                thisShop.find('.shop-check').next('label').removeClass('active');
            }
        } else {
            thisShop.find('.shop-check').prop('checked', false);
            thisShop.find('.shop-check').next('label').removeClass('active');
        }
        // 执行合计
        total();
    });

    // 5.商品全部选中,全选按钮选中-任何一个不选,全选取消 ------合计
    $('.son-check').change(function () {
        // 商品的DOM元素的数量
        var count = $('.son-check').length;
        // 选中商品的DOM元素的数量
        var num = $('.son-check:checked').length;
        if (count == num) {
            $('.whole-check').prop('checked', true);
            $('.whole-check').next('label').addClass('active');
        } else {
            $('.whole-check').prop('checked', false);
            $('.whole-check').next('label').removeClass('active');
        };
        // 执行合计
        total();
    });

    // 6.加事件 ------合计执行
    $('.add').click(function (e) {
        // 1.使减按钮解除禁用
        $(this).prevAll('.reduce').prop('disabled', false);
        // 3.改变小计
        // 获取单价
        var shul = Number($(this).prev().val()) ;
        shul+=1;
        $(this).prev().val(shul);
        var danjia = $(this).parents('li').prev().children().text();
        $(this).parents('li').next().children().text(shul*danjia);

        // 执行合计
        total();
    });

    // 7.减事件 ------合计执行
    $('.reduce').click(function () {
        var input = $(this).next('input');
        var reduceNum = Number(input.val()) - 1;
        input.val(reduceNum);
        // 判断数量为1时禁用
        if (reduceNum == 1) {
            $(this).prop('disabled', true);
            return
        };
        // 3.改变小计
        // 获取单价
        var shul1 = $(this).next().val();
        shul1=shul1-1;
        $(this).prev().val(shul1);
        var danjia1 = $(this).parents('li').prev().children().text();
        $(this).parents('li').next().children().text(shul1*danjia1);
        // 执行合计
        total();

    });

    // 8.输入产品计算商品价格小计 ------合计执行
    $('input[type=text]').keyup(function () {
        // 判定输入是否合法
        var inputValue = $(this).val().replace(/\D|^0/, '');
        if (!inputValue) {
            inputValue = 1;
        };
        // 进行一系列的验证然后再将值设置给val
        $(this).val(inputValue);
        // 3.改变小计
        // 获取单价
        var price = $(this).parents('.cart-lists').find('.price').text();
        $(this).parents('.cart-lists').find('.price-sum').text(price * inputValue);

        // 执行合计
        total();

    });
    // 9.删除事件-模态框(删除的弹出框)的取消和确定------合计执行
    $('.cart-dele').click(function () {
        // 当点击删除时,让模态框显示
        $('.modal-bg').fadeIn();
        $('.modal-box').fadeIn();
        // 点击取消时,模态框关闭
        $('.close').click(function () {
            $('.modal-bg').fadeOut();
            $('.modal-box').fadeOut();
        });
        // 点击ok后删除当条商品的DOM元素
        // 找到最大的商品信息的DOM元素
        var cartLists = $(this).parents('.cart-lists').eq($(this).index());
        console.log(cartLists);
        var carContent = $(this).parents('.cart-content')
        var carBox = $(this).parents('.cart-box')
        $('.ok').click(function () {
            // 删除当条商品的DOM元素
            cartLists.remove();
            // 删除商品的店铺全部删除后,该店铺的DOM元素也要删除
            if (carContent.children().length == 0) {
                carContent.parents('.cart-box').remove();
            };
            // 对商铺的全选和全选进行监听
            // 该店铺下所有商品的DOM元素的数量
            var count = carContent.find('.son-check').length;
            // 选中商品的DOM元素的数量
            var num = carContent.find('.son-check:checked').length;
            console.log(count);
            console.log(num);
            // 如果相等让店铺选中
            if (count == num) {
                carBox.find('.shop-check').prop('checked', true);
                carBox.find('.shop-check').next('label').addClass('active');
            } else {
                carBox.find('.shop-check').prop('checked', false);
                carBox.find('.shop-check').next('label').removeClass('active');
            };
            // 全选选择框进行监听
            var shopCount = $('.shop-check').length;
            // 选中的店铺的DOM元素的数量
            var shopNum = $('.shop-check:checked').length;
            // 如果相等那么全选选中
            if (shopCount == shopNum) {
                $('.whole-check').prop('checked', true);
                $('.whole-check').next('label').addClass('active');
            } else {
                $('.whole-check').prop('checked', false);
                $('.whole-check').next('label').removeClass('active');
            };
            total();
            $('.modal-bg').fadeOut();
            $('.modal-box').fadeOut();
        });
    });
});

var value = "";
for (var i = 0; i < localStorage.length; i++) {
    // 取出name键值
    var name = localStorage.key(i);
    // 取出存储的值
    value += localStorage.getItem(name);
    console.log(value);
}
arr = value;
var JSONObj = JSON.parse(arr);
console.log(arr);


function showPage(data) {
    console.log(data[0]);
    var pageDatas ="";
    for (var i = 1; i < data.length; i++) {
        pageDatas += `
        <ul class="cart-lists">
        <li class="cart-check">
                            <input type="checkbox" id="check${i }" class="son-check">
                            <label for="check${i}"></label>
                        </li>
                        <li class="cart-con">
                            <div class="cart-img">
                                <a href=""><img src="${data[i].nowurl}"></a>
                            </div>
                            <div class="cart-text fs12">${data[i].goods_title}</div>
                        </li>
                        <li class="cart-price">
                            <p class="price">${data[i].goods_price}</p>
                        </li>
                        <li class="cart-amount">
                            <div class="amount-box">
                                <button class="reduce" disabled>-</button>
                                <input type="text" value="1">
                                <button class="add">+</button>
                            </div>
                        </li>
                        <li class="cart-sum">
                            <p class="price-sum">${data[i].goods_price}</p>
                        </li>
                        <li class="cart-option">
                            <div class="cart-dele">删除</div>
                        </li>
                        </ul>`
    };
    $('.cart-lists:eq(1)').html(pageDatas)
}




